<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>
            {{message}}
        </h1>
        <h1 id="hh">{{num}}</h1>
        <button @click='add'>点击+1</button>
        <button>点击跳转</button>

    </div>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue22222!',
                num: 1995
            },
            methods: {
                fn1() {
                    console.log('fn1')
                },
                add() {
                    this.num++
                }
            },
            filters: {

            },
            computed: {

            },
            watch: {

            },
            directives: {

            },
            // 以下是VUE的生命周期  
            // 生命周期定义 在一个应用 创建到消亡阶段 在某一时刻 会自动调用的回调函数就叫做生命周期
            // 实例创建之前 内部  new操作符初始化
            beforeCreate() {
                console.log('创建之前beforeCreate ')
                console.log(this.message)
                // console.log(this.fn1())
            },
            // 实例创建之后 内部  new操作符初始化
            created() {
                // 向服务器请求 渲染出 城市天气预报 ajax
                // 用法 数据 方法都可以调用 最快发送AJAX的时刻  
                console.log('创建之前 Created 实例创建之后 ')
                console.log(this.message)
                console.log(this.fn1())

                // 这个时候 有问题的地方 
                var h = document.getElementById('hh')
                console.log('h', h)

                // 因为数据没有完全渲染的关系  如果进行dom操作 就有问题  
            },
            // dom渲染之前  
            beforeMount() {
                console.log('beforeMount')
                var h = document.getElementById('hh')
                console.log('h', h)
                console.log(this.message)
                console.log(this.fn1())
            },
            // dom渲染后
            mounted() {
                // 这个位置是最快可以DOM操作的位置  不会获取到假的节点！！！
                console.log(' Mounted')
                var h = document.getElementById('hh')
                console.log('h', h)
                console.log(this.message)
                console.log(this.fn1())
            },
            // 更新之前 数据和视图联系的数据 更新之前会自动调用
            beforeUpdate() {
                console.log('beforeUpdae')
                var h = document.getElementById('hh')
                console.log('h', h)
                console.log('h', h.innerHTML)
                console.log('this.num',this.num)

            },
            // 更新之后 数据和视图联系的数据 更新之后会自动调用
            updated() {
                console.log('updated')
                var h = document.getElementById('hh')
                console.log('h', h)
                console.log('h', h.innerHTML)
                console.log('this.num',this.num)
                // if(this.num >2000) {
                //     this.num =1999
                // }

            },
            // 销毁之前 
            beforeDestory() {
                console.log(' beforeDestory')
            },
            // 销毁之后
            destoryed(){
                console.log(' destoryed')
                // 跳完页面 上一个页面  没用变量  函数 需要 遍历做  a=null的处理  
            }
        })


        console.log(app)
    </script>
</body>

</html>